<template>
  <div>
    <!-- 面包屑导航 -->
    <el-breadcrumb separator="/">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>支付管理</el-breadcrumb-item>
      <el-breadcrumb-item>支付列表</el-breadcrumb-item>
    </el-breadcrumb>
    <el-card>
      <el-table :data="payList" border>
        <el-table-column prop="paymentType" label="支付方式"> </el-table-column>
        <el-table-column prop="isActived" label="是否启用">
          <template slot-scope="scope">
            <el-switch
              v-model="scope.row.isActived"
              active-color="#13ce66"
              inactive-color="#ff4949"
              @change="PayStateChanged(scope.row)"
            >
            </el-switch>
          </template>
        </el-table-column>
      </el-table>
    </el-card>
  </div>
</template>

<script>
export default {
  data () {
    return {
      // 支付方式的列表数据
      payList: []
    }
  },
  created () {
    // 获取支付列表数据
    this.getPayList()
  },
  methods: {
    // 获取支付列表
    async getPayList () {
      const { data: res } = await this.$http.get('Payments')
      if (res.meta.status !== 200) {
        // 获取支付列表失败
        this.$message.error('获取支付列表失败！')
      } else {
        // 获取支付列表成功
        // 数据赋值
        this.payList = res.data.payments
      }
    },
    // 支付状态的改变
    async PayStateChanged (payInfo) {
      const { data: res } = await this.$http.put(`Payments/status/${payInfo.id}`)
      if (res.meta.status !== 200) {
        // 支付状态更新失败
        // 将UI界面上的状态值取反，也就是取消了状态的改变
        payInfo.isActived = !payInfo.isActived
        // 返回提示信息
        this.$message.error('支付状态更新失败！')
      } else {
        // 支付状态更新成功
        this.$message.success('支付状态更新成功！')
      }
    }
  }
}
</script>

<style lang="css" scoped>
</style>
